<template>
	<div class="PcHome">
		<!-- 页面首页 -->
		<div class="default">
			<Header></Header>
			<div class="Menus">
				<Menus>
					<router-link to="/">全部商品分类详情</router-link>
				</Menus>
				<Menus>热卖的商品</Menus>
			</div>
			<div class="home">
				<HomeClassify></HomeClassify>
				<PcHomeSwiper></PcHomeSwiper>
				<HomeHot :catelist='catelist'  v-on:bookid='add'></HomeHot>
			</div>

			<Menus>最新上架书籍</Menus>
			<HomeBookList :proplist='bookslist' v-on:bookid='add'></HomeBookList>
	
		</div>
	</div>
</template>

<script>
	import PcHomeSwiper from '@/components/pc/home/PcHomeSwiper.vue'
	import HomeClassify from '@/components/pc/home/HomeClassify.vue'
	import HomeHot from '@/components/pc/home/HomeHot.vue'
	import HomeBookList from '@/components/pc/home/HomeBookList.vue'
	import Header from '@/components/pc/default/Header.vue'
	import Menus from '@/components/pc/default/Menus.vue'
	import {
		mapActions,
		mapState
	} from 'vuex'
	export default {
		name: 'Home',
		components: {
			HomeClassify,
			PcHomeSwiper,
			HomeBookList,
			HomeHot,
			Header,
			Menus
		},
		data() {
			return {
				catelist: [],
				bookslist:[]
			}
		},
		created() {
			this.$axios.get('/api/public/checkToken').then((res) => {
				if (res.data == 200) {
					console.log(1);
					console.log(res.data);
					if (res.data.data == 401) {
						window.localStorage.clear() //清楚所有的localStorage
						this.$message({
							message: "请重新登录",
							type: "error"
						})
					} else if (res.data.data == 200) {
						console.log('token成功');
						this.$message({
							message: "登录成功",
							type: "success"
						})
					}
				}
			}).catch((error) => {
				console.log(error);
			})
			this.$axios.get('api/public/book/findTopSale/20').then((res1) => {
				if (res1.status == 200) {
					this.catelist = res1.data.data
					this.bookslist = res1.data.data
				}
			}).catch((error) => {
				console.log(error);
			})
	},
	mounted() {
		if (this._isMobile()) {
			// alert("手机端");
			this.$router.push('/mobile/home');
		} else {
			// alert("pc端");
			this.$router.push('/pc/home');
		}
	},
	computed: {
		...mapState('user', ['user'])
	},
	methods: {
		_isMobile() {
			let flag = navigator.userAgent.match(
				/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				)
			return flag;
		},
			add(id) {
				if (this.user != null) {
					this.$axios.get('/api/public/addCart/' +id).then(
						(res) => {
							if (res.data = 200) {
								this.$message({
									message: "添加成功",
									type: "success"
								})
								console.log(res)
							}
		
						}).catch((err) => {
						console.log(err);
					})
				} else {
					this.$message({
						message: "请登录",
						type: "info"
					})
					this.$router.push('/pc/login')
				}
			},
	}

	}
</script>

<style scoped>
	.PcHome {
		width: 100%;
		min-width: calc(120ch);
	}

	.PcHome .Menus {
		display: flex;
		align-items: center;
		justify-content: space-between;

		border-bottom: #1e90ff solid 1px;
	}

	.PcHome .default {
		width: 85%;
		margin: auto;
	}

	.PcHome .default .home {
		display: flex;
		
		justify-content: space-between;
		border: 1px solid #d6d6d6;
		margin: 5px 0px;
	}
</style>